<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            animation: myAnim 3s linear 0s 5; 
        }
        .box:hover{
            /* background-color: turquoise; */
            animation-play-state: paused;
        }
        @keyframes myAnim{
            0% {
                opacity: 1;  /* opacity：设置透明度*/
                background-color: red;
            }
            50% {
                opacity: 0.6;
                background-color: yellow;
            }
            100% {
                opacity: 0.1;
                background-color: rgb(89, 58, 215);
            }
        }
    </style>
</head>

<body>
    <div>
        <p>动画是使元素从一种样式逐渐变化为另外一种样式的效果。可以改变任意多的样式和任意次数。</p>
        <p>使用百分比来规定变化发生的时间，或用关键字 from 和 to，等同于 0% 和 100%。</p>
        <p>0% 是动画的开始，100%是动画的完成。使用 0% 和 100%的动画次数可以有很多次。</p>
        <p><br>@keyframes 创建动画：使用 @keyframes 规则，可以创建动画。</p>
        <p>@keyframes name {</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;from|0% {</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CSS样式</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;}</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;percent {</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CSS样式</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;}</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;to|100% {</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CSS样式</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;}</p>
        <p>}</p>
        <p>name 代表动画名称，开发人员自己命名。<br>percent 为百分比值，可以添加多个百分比值。</p>
        <p><br>动画的执行：<br>animation 执行动画：</p>
        <p style="color:red;">animation: name  duration  timing-function  delay  iteration-count  direction;</p>
        <p style="color:red;">animation: 动画名称 动画持续时间 动画速率变化情况 动画延迟时间 动画循环次数 动画的播放方向</p>
        <p>name: 设置动画的名称;</p>
        <p>duration: 设置动画的持续时间;</p>
        <p>timing-function: 设置动画效果的速率; 值的情况有 逐渐变慢（ease）、匀速（linear）、加速（ease-in）、减速（ease-out）、先快后慢（ease-in-out）。默认为逐渐变慢。</p>
        <p>delay: 设置动画的开始时间（延时执行）;</p>
        <p>iteration-count: 设置动画循环的次数，infinite 为无限次数的循环;</p>
        <p>direction: 设置动画播放的方向; 值的情况有 先前播放（normal）、动画播放在第偶数次向前播放（alternate）。第奇数次反向播放。默认向前播放。</p>
        <p>animation-play-state: 控制动画的播放状态，running 代表播放，而 paused代表停止播放。</p>
    </div>
    <div class="box"></div>
</body>

</html>